<template>
  <PageContainer
    title="到货管理"
    :actions="pageActions"
    :columns="columns"
    :data-source="orderList"
    :loading="loading"
    :pagination-data="pagination"
    @search="handleSearch"
    @reset="handleReset"
    @pagination-change="handlePaginationChange"
  >
    <!-- 筛选条件 -->
    <template #filter-items>
      <a-form-item label="运单号">
        <a-input
          v-model:value="queryParams.orderNo"
          placeholder="请输入运单号"
          style="width: 180px"
          allowClear
        />
      </a-form-item>
      <a-form-item label="货物编码">
        <a-input
          v-model:value="queryParams.goodsCode"
          placeholder="请输入货物编码"
          style="width: 180px"
          allowClear
        />
      </a-form-item>
      <a-form-item label="发货站点">
        <a-select
          v-model:value="queryParams.departureSiteId"
          placeholder="全部发货站点"
          style="width: 160px"
          allowClear
          :loading="siteLoading"
        >
          <a-select-option
            v-for="site in siteOptions"
            :key="site.id"
            :value="site.id"
            :disabled="site.id === userStore.userInfo?.siteId"
          >
            {{ site.siteName }}
            <span
              v-if="site.id === userStore.userInfo?.siteId"
              style="color: #999; font-size: 12px"
            >
              （当前站点）
            </span>
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="收货司机">
        <a-select
          v-model:value="queryParams.driverId"
          placeholder="输入司机姓名/工号搜索"
          allowClear
          show-search
          :filter-option="false"
          :loading="driverLoading"
          @search="handleDriverSearch"
          @focus="handleDriverFocus"
        >
          <a-select-option
            v-for="driver in driverOptions"
            :key="driver.id"
            :value="driver.id"
          >
            {{ driver.name }}（{{ driver.driverNo }}）
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="运输车辆">
        <a-select
          v-model:value="queryParams.vehicleId"
          placeholder="输入车牌号搜索"
          allowClear
          show-search
          :filter-option="false"
          :loading="vehicleLoading"
          @search="handleVehicleSearch"
          @focus="handleVehicleFocus"
        >
          <a-select-option
            v-for="vehicle in vehicleOptions"
            :key="vehicle.id"
            :value="vehicle.id"
          >
            {{ vehicle.plateNumber }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="付款方式">
        <a-select
          v-model:value="queryParams.paymentMethod"
          placeholder="全部付款方式"
          style="width: 150px"
          allowClear
          :options="paymentMethodOptions"
        />
      </a-form-item>
      <a-form-item label="订单状态">
        <a-select
          v-model:value="queryParams.orderStatus"
          placeholder="全部状态"
          allowClear
          :options="statusOptions"
        />
      </a-form-item>

      <a-form-item label="时间范围" class="col-span-2">
        <a-range-picker
          v-model:value="dateRange"
          format="YYYY-MM-DD"
          :placeholder="['开始日期', '结束日期']"
        />
      </a-form-item>

      <a-form-item label="发货人">
        <a-input
          v-model:value="queryParams.senderName"
          placeholder="输入发货人姓名"
          allowClear
        />
      </a-form-item>

      <a-form-item label="发货电话">
        <a-input
          v-model:value="queryParams.senderPhone"
          placeholder="输入发货电话"
          allowClear
        />
      </a-form-item>

      <a-form-item label="收货人">
        <a-input
          v-model:value="queryParams.receiverName"
          placeholder="输入收货人姓名"
          allowClear
        />
      </a-form-item>

      <a-form-item label="收货电话">
        <a-input
          v-model:value="queryParams.receiverPhone"
          placeholder="输入收货电话"
          allowClear
        />
      </a-form-item>

      <a-form-item label="货物名称">
        <a-input
          v-model:value="queryParams.goodsName"
          placeholder="输入货物名称"
          allowClear
        />
      </a-form-item>
    </template>

    <!-- 表格内容 -->
    <template #bodyCell="{ column, record }">
      <!-- 运单信息 -->
      <template v-if="column.key === 'orderInfo'">
        <div class="order-info">
          <a class="order-no-link" @click="handleView(record)">{{
            record.orderNo
          }}</a>
          <div class="order-meta">编码：{{ record.goodsCode || "未填写" }}</div>
        </div>
      </template>

      <!-- 站点路线 -->
      <template v-else-if="column.key === 'sites'">
        <div class="site-route">
          <span>{{ record.departureSiteName || "未填写" }}</span>
          <arrow-right-outlined class="site-arrow" />
          <span>{{ record.arrivalSiteName || "未填写" }}</span>
        </div>
      </template>

      <!-- 收货人/电话 -->
      <template v-else-if="column.key === 'receiver'">
        <div class="contact-block">
          <span class="contact-name">{{ record.receiverName || "-" }}</span>
          <span class="contact-phone">{{ record.receiverPhone || "-" }}</span>
        </div>
      </template>

      <!-- 发货人/电话 -->
      <template v-else-if="column.key === 'sender'">
        <div class="contact-block">
          <span class="contact-name">{{ record.senderName || "-" }}</span>
          <span class="contact-phone">{{ record.senderPhone || "-" }}</span>
        </div>
      </template>

      <!-- 货物信息 -->
      <template v-else-if="column.key === 'goods'">
        <div class="goods-info">
          <span class="goods-name">{{ record.goodsName || "-" }}</span>
          <span class="goods-detail"
            >{{ record.goodsPackage || "未填写" }} ·
            {{ record.goodsPieces || 0 }}件</span
          >
        </div>
      </template>

      <!-- 配送方式 -->
      <template v-else-if="column.key === 'deliveryInfo'">
        <div class="delivery-info">
          <div>
            {{ record.deliveryType === "PICKUP" ? "到站自提" : "送货上门" }}
          </div>
          <div
            v-if="record.deliveryOptions"
            style="
              margin-top: 4px;
              font-size: 12px;
              color: var(--primary-color);
            "
          >
            <template
              v-for="(opt, idx) in record.deliveryOptions.split(',')"
              :key="opt"
            >
              <span v-if="idx > 0"> · </span>
              <span v-if="opt === 'SIGN_RECEIPT'">签回单</span>
              <span v-else-if="opt === 'PRINT_RECEIPT'">打收条</span>
            </template>
          </div>
        </div>
      </template>

      <!-- 司机 -->
      <template v-else-if="column.key === 'vehicle'">
        <div
          v-if="record.driverName || record.vehiclePlate"
          class="vehicle-info"
        >
          <span>{{ record.driverName || "-" }}</span>
          <span class="vehicle-plate">{{ record.vehiclePlate || "-" }}</span>
        </div>
        <span v-else class="text-secondary">未分配</span>
      </template>

      <!-- 实收运费（仅超级管理员在全部站点模式下可见） -->
      <template v-else-if="column.key === 'freightAmount'">
        <span
          v-if="
            record.freightAmount !== null && record.freightAmount !== undefined
          "
          class="freight-amount"
        >
          {{ formatMoney(record.freightAmount) }}
        </span>
        <span v-else class="text-secondary">-</span>
      </template>

      <!-- 结算运费（所有人可见） -->
      <template v-else-if="column.key === 'settlementAmount'">
        <span class="settlement-amount">{{
          formatMoney(record.settlementAmount)
        }}</span>
      </template>

      <!-- 付款方式 -->
      <template v-else-if="column.key === 'paymentMethod'">
        <span>{{
          record.paymentMethod
            ? getPaymentMethodLabel(record.paymentMethod)
            : "未选择"
        }}</span>
      </template>

      <!-- 代收款 -->
      <template v-else-if="column.key === 'collectionAmount'">
        <span>{{ formatMoney(record.collectionAmount) }}</span>
      </template>

      <!-- 送货司机 -->
      <template v-else-if="column.key === 'deliveryDriver'">
        <div v-if="record.deliveryDriverName">
          <div>{{ record.deliveryDriverName }}</div>
          <div class="text-secondary" style="font-size: 12px">
            {{ record.deliveryDriverPhone || "-" }}
          </div>
        </div>
        <span v-else class="text-secondary">-</span>
      </template>

      <!-- 开票员 -->
      <template v-else-if="column.key === 'issuer'">
        <span>{{ record.issuerName || "-" }}</span>
      </template>

      <!-- 发货时间 -->
      <template v-else-if="column.key === 'dispatchTime'">
        <span>{{
          record.dispatchTime ? formatDateTime(record.dispatchTime) : "-"
        }}</span>
      </template>

      <!-- 到货时间 -->
      <template v-else-if="column.key === 'arrivalTime'">
        <span>{{
          record.arrivalTime ? formatDateTime(record.arrivalTime) : "-"
        }}</span>
      </template>

      <!-- 创建时间 -->
      <template v-else-if="column.key === 'createTime'">
        {{ formatDateTime(record.createTime) }}
      </template>

      <!-- 备注 -->
      <template v-else-if="column.key === 'remark'">
        <span>{{ record.remark || "-" }}</span>
      </template>

      <!-- 订单状态 -->
      <template v-else-if="column.key === 'orderStatus'">
        <a-tag
          :color="ORDER_STATUS_CONFIG[record.orderStatus as keyof typeof ORDER_STATUS_CONFIG]?.color"
        >
          {{ getStatusLabel(record) }}
        </a-tag>
      </template>

      <!-- 操作 -->
      <template v-else-if="column.key === 'action'">
        <a-space>
          <a-button type="link" size="small" @click="handleView(record)">
            查看
          </a-button>
          <!-- 已到站状态 -->
          <template v-if="record.orderStatus === 'ARRIVED'">
            <!-- 自提订单：直接完成 -->
            <a-button
              v-if="record.deliveryType === 'PICKUP'"
              type="link"
              size="small"
              @click="handleComplete(record)"
            >
              完成订单
            </a-button>
            <!-- 送货上门：分配送货司机 -->
            <a-button
              v-else
              type="link"
              size="small"
              @click="handleAssignDeliveryDriver(record)"
            >
              分配送货司机
            </a-button>
          </template>
          <!-- 配送中状态：修改送货司机 + 取消送货 + 完成订单 -->
          <template v-if="record.orderStatus === 'DELIVERING'">
            <a-button
              v-if="record.deliveryType === 'DELIVERY'"
              type="link"
              size="small"
              @click="handleAssignDeliveryDriver(record)"
            >
              修改送货司机
            </a-button>
            <a-button
              v-if="record.deliveryType === 'DELIVERY'"
              type="link"
              size="small"
              danger
              @click="handleCancelDelivery(record)"
            >
              取消送货
            </a-button>
            <a-button type="link" size="small" @click="handleComplete(record)">
              完成订单
            </a-button>
          </template>
        </a-space>
      </template>
    </template>
  </PageContainer>

  <!-- 分配送货司机弹窗 -->
  <a-modal
    v-model:open="showAssignDeliveryDriverModal"
    :title="
      currentDeliveryOrder?.deliveryDriverId ? '修改送货司机' : '分配送货司机'
    "
    @ok="confirmAssignDeliveryDriver"
    @cancel="showAssignDeliveryDriverModal = false"
    :width="500"
  >
    <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <a-form-item label="选择送货司机" required>
        <a-select
          v-model:value="assignDeliveryForm.driverId"
          placeholder="请选择送货司机"
          :loading="deliveryDriverLoading"
          show-search
          :filter-option="filterDeliveryDriverOption"
        >
          <a-select-option
            v-for="driver in availableDeliveryDrivers"
            :key="driver.id"
            :value="driver.id"
          >
            {{ driver.name }}（{{ driver.driverNo }}） - {{ driver.phone }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { ArrowRightOutlined, ExportOutlined } from "@ant-design/icons-vue";
import PageContainer from "@/components/business/PageContainer.vue";
import { getOrderList, updateOrderStatus } from "@/api/tenant/order";
import { getSiteList } from "@/api/tenant/site";
import { useDictionary } from "@/composables/useDictionary";
import { useUserStore } from "@/stores/user";
import type { Order, OrderQueryParams } from "@/types/order";
import type { Site } from "@/types/site";
import { ORDER_STATUS_CONFIG } from "@/types/order";
import { formatDateTime, formatMoney } from "@/utils/format";
import type { Dayjs } from "dayjs";

const router = useRouter();
const userStore = useUserStore();

const loading = ref(false);
const orderList = ref<Order[]>([]);
const siteOptions = ref<Site[]>([]);
const siteLoading = ref(false);
const driverOptions = ref<any[]>([]);
const driverLoading = ref(false);
const vehicleOptions = ref<any[]>([]);
const vehicleLoading = ref(false);

const dateRange = ref<[Dayjs, Dayjs] | null>(null);

const queryParams = reactive<OrderQueryParams>({
  current: 1,
  size: 10,
  orderStatus: undefined,
  orderNo: "",
  goodsCode: "",
  departureSiteId: undefined,
  driverId: undefined,
  vehicleId: undefined,
  paymentMethod: undefined,
  senderName: "",
  senderPhone: "",
  receiverName: "",
  receiverPhone: "",
  goodsName: "",
});

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  pageSizeOptions: ["10", "20", "50", "100"],
});

// 付款方式字典
const {
  options: paymentMethodOptions,
  loadDictionaries: loadPaymentMethods,
  getLabel: getPaymentMethodLabel,
} = useDictionary("PAYMENT_METHOD", true, true);

// 订单状态选项 - 从配置生成
const statusOptions = computed(() =>
  Object.entries(ORDER_STATUS_CONFIG).map(([value, meta]) => ({
    label: meta.label,
    value: value as keyof typeof ORDER_STATUS_CONFIG,
  }))
);

// 页面操作按钮配置
const pageActions = computed(() => [
  {
    key: "export",
    label: "导出",
    icon: ExportOutlined,
    onClick: () => {
      message.info("导出功能开发中");
    },
  },
]);

// 表格列配置（根据用户角色动态显示运费列）
const columns = computed(() => {
  const baseColumns: any[] = [
    { title: "运单信息", key: "orderInfo", fixed: "left" as const, width: 200 },
    { title: "站点路线", key: "sites", width: 220 },
    { title: "收货人/电话", key: "receiver", width: 120 },
    { title: "发货人/电话", key: "sender", width: 120 },
    { title: "货物信息", key: "goods", width: 120 },
    { title: "配送方式", key: "deliveryInfo", width: 140 },
    { title: "运输车辆", key: "vehicle", width: 120 },
  ];

  // 只有超级管理员在"全部站点"模式下，才能看到实收运费和结算运费（可以看到站点间差价）
  // 超级管理员选择具体站点时，也只能看到结算运费（站在该站点角度）
  // 其他角色：只能看到结算运费
  const isViewingAllSites =
    userStore.userInfo?.role === "SUPER_ADMIN" &&
    userStore.userInfo?.siteId === null;

  if (isViewingAllSites) {
    baseColumns.push(
      { title: "实收运费", key: "freightAmount", width: 100 },
      { title: "结算运费", key: "settlementAmount", width: 100 }
    );
  } else {
    // 普通用户或超级管理员选择具体站点时，只能看到结算运费
    baseColumns.push({
      title: "结算运费",
      key: "settlementAmount",
      width: 100,
    });
  }

  baseColumns.push(
    { title: "付款方式", key: "paymentMethod", width: 100 },
    {
      title: "代收款",
      dataIndex: "collectionAmount",
      key: "collectionAmount",
      width: 100,
    },
    {
      title: "状态",
      dataIndex: "orderStatus",
      key: "orderStatus",
      width: 100,
      align: "center" as const,
    },
    { title: "送货司机", key: "deliveryDriver", width: 140 },
    { title: "发车时间", key: "dispatchTime", width: 180 },
    { title: "到货时间", key: "arrivalTime", width: 180 },
    { title: "开票员", key: "issuer", width: 100 },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
      width: 180,
    },

    { title: "备注", key: "remark", width: 200 },
    {
      title: "操作",
      key: "action",
      fixed: "right" as const,
      width: 350,
      align: "center" as const,
    }
  );

  return baseColumns;
});

// 获取状态标签（处理派送中/待取货的显示）
const getStatusLabel = (order: Order) => {
  if (order.orderStatus === "DELIVERING") {
    return order.deliveryType === "PICKUP" ? "待取货" : "派送中";
  }
  return (
    ORDER_STATUS_CONFIG[order.orderStatus as keyof typeof ORDER_STATUS_CONFIG]
      ?.label || order.orderStatus
  );
};

// 司机和车辆搜索定时器
let driverSearchTimer: number | null = null;
let vehicleSearchTimer: number | null = null;

// 搜索司机（支持模糊搜索）
const searchDrivers = async (keyword = "") => {
  driverLoading.value = true;
  try {
    const { getDriverList } = await import("@/api/tenant/driver");
    const response = await getDriverList({
      current: 1,
      size: 50,
      keyword: keyword.trim(),
    });
    const data = response.data as any;
    driverOptions.value = data.records || [];
  } catch (error) {
    console.error("获取司机列表失败", error);
  } finally {
    driverLoading.value = false;
  }
};

// 司机搜索处理（防抖）
const handleDriverSearch = (value: string) => {
  if (driverSearchTimer) clearTimeout(driverSearchTimer);
  driverSearchTimer = setTimeout(() => {
    searchDrivers(value);
  }, 300);
};

// 司机下拉框获得焦点时加载数据
const handleDriverFocus = () => {
  if (driverOptions.value.length === 0) {
    searchDrivers();
  }
};

// 搜索车辆（支持模糊搜索）
const searchVehicles = async (keyword = "") => {
  vehicleLoading.value = true;
  try {
    const { getVehicleList } = await import("@/api/tenant/vehicle");
    const response = await getVehicleList({
      current: 1,
      size: 50,
      keyword: keyword.trim(),
    });
    const data = response.data as any;
    vehicleOptions.value = data.records || [];
  } catch (error) {
    console.error("获取车辆列表失败", error);
  } finally {
    vehicleLoading.value = false;
  }
};

// 车辆搜索处理（防抖）
const handleVehicleSearch = (value: string) => {
  if (vehicleSearchTimer) clearTimeout(vehicleSearchTimer);
  vehicleSearchTimer = setTimeout(() => {
    searchVehicles(value);
  }, 300);
};

// 车辆下拉框获得焦点时加载数据
const handleVehicleFocus = () => {
  if (vehicleOptions.value.length === 0) {
    searchVehicles();
  }
};

// 加载站点列表
const loadSites = async () => {
  siteLoading.value = true;
  try {
    const response = await getSiteList();
    siteOptions.value = (response.data ?? []) as unknown as Site[];
  } catch (error) {
    console.error("获取站点列表失败:", error);
  } finally {
    siteLoading.value = false;
  }
};

// 获取订单列表
const fetchOrderList = async () => {
  loading.value = true;
  try {
    const currentSiteId = userStore.userInfo?.siteId;

    const params: Record<string, any> = {
      ...queryParams,
      current: pagination.current,
      size: pagination.pageSize,
    };

    // 到货中心：如果选择了具体站点，只显示该站点的到货订单；如果选择全部站点，显示所有订单
    if (currentSiteId) {
      params.arrivalSiteId = currentSiteId;
    }

    if (dateRange.value && dateRange.value.length === 2) {
      params.startTime = dateRange.value[0].format("YYYY-MM-DD 00:00:00");
      params.endTime = dateRange.value[1].format("YYYY-MM-DD 23:59:59");
    }

    const response = await getOrderList(params);

    const data = response.data as any;
    orderList.value = data?.records || [];
    pagination.total = data?.total || 0;
  } catch (error: any) {
    message.error(error.message || "获取订单列表失败");
  } finally {
    loading.value = false;
  }
};

const handleSearch = () => {
  pagination.current = 1;
  fetchOrderList();
};

const handleReset = () => {
  Object.assign(queryParams, {
    current: 1,
    size: 10,
    orderStatus: undefined,
    orderNo: "",
    goodsCode: "",
    departureSiteId: undefined,
    driverId: undefined,
    vehicleId: undefined,
    paymentMethod: undefined,
    senderName: "",
    senderPhone: "",
    receiverName: "",
    receiverPhone: "",
    goodsName: "",
  });
  dateRange.value = null;
  // 重置时清空司机和车辆下拉选项
  driverOptions.value = [];
  vehicleOptions.value = [];
  pagination.current = 1;
  fetchOrderList();
};

const handlePaginationChange = (current: number, pageSize: number) => {
  pagination.current = current;
  pagination.pageSize = pageSize;
  fetchOrderList();
};

const handleView = (record: Order) => {
  router.push(`/tenant/arrival/${record.id}`);
};

// 确认到货
const handleConfirmArrival = async (record: Order) => {
  try {
    await updateOrderStatus(record.id, "DELIVERING");
    message.success("已确认到货");
    fetchOrderList();
  } catch (error: any) {
    message.error(error.message || "操作失败");
  }
};

// 分配送货司机相关
const showAssignDeliveryDriverModal = ref(false);
const currentDeliveryOrder = ref<Order | null>(null);
const availableDeliveryDrivers = ref<any[]>([]);
const deliveryDriverLoading = ref(false);
const assignDeliveryForm = reactive({
  driverId: undefined as number | undefined,
});

// 获取当前站点的送货司机列表
const fetchAvailableDeliveryDrivers = async () => {
  deliveryDriverLoading.value = true;
  try {
    const currentSiteId = userStore.userInfo?.siteId;
    if (!currentSiteId) {
      message.error("无法获取当前站点信息");
      return;
    }

    const { getDriverList } = await import("@/api/tenant/driver");
    const response = await getDriverList({
      siteId: currentSiteId,
      current: 1,
      size: 1000,
    });
    availableDeliveryDrivers.value =
      (response.data as any)?.records || response.data || [];
  } catch (error) {
    console.error("获取送货司机列表失败:", error);
    message.error("获取送货司机列表失败");
  } finally {
    deliveryDriverLoading.value = false;
  }
};

// 送货司机搜索过滤
const filterDeliveryDriverOption = (input: string, option: any) => {
  const driver = availableDeliveryDrivers.value.find(
    (d) => d.id === option.value
  );
  if (!driver) return false;
  return (
    driver.name.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
    driver.driverNo.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
    driver.phone.indexOf(input) >= 0
  );
};

// 打开分配送货司机对话框
const handleAssignDeliveryDriver = (record: Order) => {
  currentDeliveryOrder.value = record;
  assignDeliveryForm.driverId = record.deliveryDriverId || undefined;
  showAssignDeliveryDriverModal.value = true;
  fetchAvailableDeliveryDrivers();
};

// 确认分配送货司机
const confirmAssignDeliveryDriver = async () => {
  if (!assignDeliveryForm.driverId) {
    message.warning("请选择送货司机");
    return;
  }

  if (!currentDeliveryOrder.value) return;

  try {
    const isModify = !!currentDeliveryOrder.value.deliveryDriverId;
    const { assignDeliveryDriver } = await import("@/api/tenant/order");
    await assignDeliveryDriver(currentDeliveryOrder.value.id, {
      deliveryDriverId: assignDeliveryForm.driverId,
    });
    message.success(isModify ? "送货司机修改成功" : "送货司机分配成功");
    showAssignDeliveryDriverModal.value = false;
    fetchOrderList();
  } catch (error: any) {
    console.error("操作失败:", error);
    message.error(error.message || "操作失败");
  }
};

// 取消送货
const handleCancelDelivery = async (record: Order) => {
  try {
    const { cancelDelivery } = await import("@/api/tenant/order");
    await cancelDelivery(record.id);
    message.success("已取消送货，订单恢复为已到站状态");
    fetchOrderList();
  } catch (error: any) {
    message.error(error.message || "取消送货失败");
  }
};

// 完成订单
const handleComplete = async (record: Order) => {
  try {
    await updateOrderStatus(record.id, "COMPLETED");
    message.success("订单已完成");
    fetchOrderList();
  } catch (error: any) {
    message.error(error.message || "操作失败");
  }
};

onMounted(async () => {
  await Promise.all([loadSites(), loadPaymentMethods()]);
  fetchOrderList();
});
</script>

<style scoped>
.order-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-no-link {
  font-weight: 600;
  color: var(--primary-color);
  cursor: pointer;
}

.order-no-link:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

.order-meta {
  font-size: 12px;
  color: var(--text-secondary);
}

.site-route {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}

.site-arrow {
  color: var(--text-secondary);
}

.contact-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-name {
  font-weight: 500;
}

.contact-phone {
  font-size: 12px;
  color: var(--text-secondary);
}

.goods-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.goods-name {
  font-weight: 500;
}

.goods-detail {
  font-size: 12px;
  color: var(--text-secondary);
}

.vehicle-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vehicle-plate {
  font-size: 12px;
  color: var(--text-secondary);
}

.freight-amount {
  font-weight: 600;
  color: var(--success-color);
}

.settlement-amount {
  font-weight: 600;
  color: var(--primary-color);
}

.text-secondary {
  color: var(--text-secondary);
}
</style>
